<template>
  <div id="app">
    <Header  @on-result-change="_collapseClick" ></Header>
    <HBody :isCollapse="isCollapse"></HBody>
  </div>
</template>

<script>
  import  Header from  '../components/common/Header'
  import  HBody from  '../components/common/Hbody'
  export default {

    components:{
      Header,
      HBody
    },
    data(){
      return {
        searchCriteria: '',
        isCollapse: false,
      }
    },
    methods:{
      handleIconClick(ev) {
        console.log(ev);
      },

      _collapseClick(data){
         this.isCollapse=data;
      },

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .con_section{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left:0px;
    width:100%;
  }
  .header {
    height: 60px;
    line-height: 60px;
    background: #67c23a;
    color: #fff;
  }
  .el-menu-item.is-active {
    color: #67c23a;
  }
  .header-logo{
    float: left;
    height: 60px;
    margin: 0 20px;
    width: 300px;
  }
  ul.el-menu {
    background: #e4e8f1;
  }
  .user-info{
    position: absolute;
    right: 0;
  }
  .el-submenu__title{
    background:#eef1f6;
  }
  .el_main{
    padding:0px;
  }
  .home_main{
    padding:10px;
  }
  .breadcrumb-container .title {
    width: 200px;
    float: left;
    color: #475669;
    font-size: 13px;
  }
  .breadcrumb-inner {
    float: right;
    font-size: 13px;
  }
  .el-breadcrumb__inner, .el-breadcrumb__inner a {
    font-weight: 400;
  }
  .el-container.is-vertical{
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
  }


</style>
